<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.banner {
				width: 100%; 
				height: 500px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2px solid #000;
				background: linear-gradient(-135deg, #000 50%,#fff 50%, #fff 100%);
				isolation: isolate;
			}
			.title {
				color: #fff;
				font-size: 3em;
				transition: 0.5s;
				/* 差值算法 */
				mix-blend-mode: difference;
			}
			.banner:hover .title {
				transform: translateX(-100px);
			}
		</style>
	</head>
	<body>
		<div class="banner">
			<h1 class="title">Sheeppp 文字适配背景</h1>
		</div>
	</body>
</html>